import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'

/**
 * 主题管理 Hook
 * 负责将主题设置应用到 DOM 元素和 CSS 变量
 */
export const useTheme = () => {
  const { currentTheme, settings, themeConfig } = useSelector((state: RootState) => state.theme)

  useEffect(() => {
    // 设置 HTML 根元素的主题属性
    const htmlElement = document.documentElement
    
    // 设置主题类名
    htmlElement.setAttribute('data-theme', currentTheme)
    htmlElement.className = htmlElement.className.replace(/theme-\w+/g, '')
    htmlElement.classList.add(`theme-${currentTheme}`)
    
    // 设置 CSS 变量
    const root = document.documentElement.style
    
    // 基础主题变量
    root.setProperty('--primary-color', settings.primaryColor)
    root.setProperty('--theme-background', themeConfig.backgroundColor)
    root.setProperty('--theme-text-color', themeConfig.textColor)
    root.setProperty('--theme-border-color', themeConfig.borderColor)
    
    // 布局相关变量
    root.setProperty('--sidebar-background', themeConfig.sidebarBackground)
    root.setProperty('--sidebar-text-color', themeConfig.sidebarTextColor)
    root.setProperty('--header-background', themeConfig.headerBackground)
    root.setProperty('--header-text-color', themeConfig.headerTextColor)
    
    // 动画变量
    root.setProperty('--animation-duration', settings.enableAnimation ? '0.3s' : '0s')
    root.setProperty('--animation-timing', settings.enableAnimation ? 'cubic-bezier(0.645, 0.045, 0.355, 1)' : 'linear')
    
    // 布局设置变量
    root.setProperty('--layout-style', settings.layoutStyle)
    root.setProperty('--fixed-header', settings.fixedHeader ? 'fixed' : 'static')
    root.setProperty('--fixed-sidebar', settings.fixedSidebar ? 'fixed' : 'static')
    
    // 显示设置变量
    root.setProperty('--show-logo', settings.showLogo ? 'block' : 'none')
    root.setProperty('--show-breadcrumb', settings.showBreadcrumb ? 'block' : 'none')
    
    // 标签页设置变量
    root.setProperty('--enable-tabs', settings.enableTabs ? 'block' : 'none')
    
  }, [currentTheme, settings, themeConfig])

  return {
    currentTheme,
    settings,
    themeConfig,
    isDarkMode: currentTheme === 'dark',
    isLightMode: currentTheme === 'light'
  }
}